<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
</head>
<body>
<!--顶部菜单栏-->
<header>
    <div class="top">
        <div class="top_left">
            <ul>
                <li><a href="https://www.mi.com" target="_blank">小米商城</a></li>
                <span>|</span>
                <li><a href="#">MIUI</a></li>
                <span>|</span>
                <li><a href="#">IoT</a></li>
                <span>|</span>
                <li><a href="#">云服务</a></li>
                <span>|</span>
                <li><a href="#">金融</a></li>
                <span>|</span>
                <li><a href="#">有品</a></li>
                <span>|</span>
                <li><a href="#">小爱开放平台</a></li>
                <span>|</span>
                <li><a href="#">政企服务</a></li>
                <span>|</span>
                <li><a href="#">Select Region</a></li>
            </ul>
        </div>
        <div class="top_right">
            <div class="gouwuche"><a href="#">购物车</a></div>
            <div>
                <ul>
                    <li><a href="#">消息通知</a></li>
                    <span>|</span>
                    <li><a href="" target="_blank">注册</a></li>
                    <span>|</span>
                    <li><a href="" target="_blank">登陆</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<!--横向导航栏-->
<div class="nav_x">
    <a class="logo" href="index.html" target="_self"><img src="image/logo_top.png" alt="小米logo"></a>
    <a class="gif" href=""><img src="image/cms_15373613641608_oBmfS.gif" alt=""></a>
    <div class="nav_left">
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">红米</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">空调</a></li>
            <li><a href="#">新品</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
        </ul>
    </div>
    <div class="search">
        <form action="" method="post">
            <input type="text" class="search-text" name="keyword">
            <input type="submit" class="search-btn" value="搜索">
            <div class="search_words1">
                <a href="#">小米8</a>
            </div>
            <div class="search_words2">
                <a href="#">小米MIX 2S</a>
            </div>
        </form>
    </div>
</div>
<!--纵向轮播图-->
<div class="nav_y">
    <div class="swiper-container swiper-container-horizontal">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-2452px, 0px, 0px);">
            <div class="swiper-slide" style="width: 1226px;"><a href="#"><img src="image/lunbotu1.jpg" alt=""></a></div>
            <div class="swiper-slide swiper-slide-prev" style="width: 1226px;"><a href="#"><img src="image/lunbotu2.jpg"
                                                                                                alt=""></a></div>
            <div class="swiper-slide swiper-slide-active" style="width: 1226px;"><a href="#"><img
                    src="image/lunbotu3.jpg" alt=""></a></div>
            <div class="swiper-slide swiper-slide-next" style="width: 1226px;"><a href="#"><img src="image/lunbotu4.jpg"
                                                                                                alt=""></a></div>
            <div class="swiper-slide" style="width: 1226px;"><a href="#"><img src="image/lunbotu5.jpg" alt=""></a></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-bullets">
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet"></span>
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
        <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
             aria-disabled="false"></div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
    <div class="nav">
        <ul class="parent">
            <li>
                <a href="#">手机</a>
                <a href="#">电话卡</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">电视</a>
                <a href="#">盒子</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">笔记本</a>
                <a href="#">平板</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">家电</a>
                <a href="#">插线板</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">出行</a>
                <a href="#">穿戴</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">智能</a>
                <a href="#">路由器</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">电源</a>
                <a href="#">配件</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">个护</a>
                <a href="#">儿童</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">耳机</a>
                <a href="#">音箱</a>
                <div class="child"></div>
            </li>
            <li>
                <a href="#">生活</a>
                <a href="#">箱包</a>
                <div class="child"></div>
            </li>
        </ul>
    </div>
</div>
<!--底部菜单栏-->
<div class="nav_bottom">
    <div class="sidebar">
        <div class="fl"><a href="#"><img src="image/hjh_01.gif" alt=""></a></div>
        <div class="fl"><a href="#"><img src="image/hjh_02.gif" alt=""></a></div>
        <div class="fl"><a href="#"><img src="image/hjh_03.gif" alt=""></a></div>
        <div class="fl"><a href="#"><img src="image/hjh_04.gif" alt=""></a></div>
        <div class="fl"><a href="#"><img src="image/hjh_05.gif" alt=""></a></div>
        <div class="fl"><a href="#"><img src="image/hjh_06.gif" alt=""></a></div>
    </div>
    <div class="datu"><a href="#"><img src="image/xiaomimix2s.jpg" alt=""></a></div>
    <div class="datu"><a href="#"><img src="image/hongmi6.jpg" alt=""></a></div>
    <div class="datu"><a href="#"><img src="image/kongqijinghuaqimax.jpg" alt=""></a></div>
</div>
<div class="shangou">
    <div class="title">
        <h2>小米闪购</h2>
        <a href="#"><img src="image/fanye.png" alt=""></a>
    </div>
    <div class="main">
        <div class="shangou-f">
            <div class="shijian">20:00场</div>
            <div class="tupian"><img src="image/shangou.png" alt=""></div>
            <div class="miaoshu">距离结束还有</div>
            <div class="daojishi">
                <div class="box">00</div>
                <div class="dosh">:</div>
                <div class="box">00</div>
                <div class="dosh">:</div>
                <div class="box">00</div>
            </div>
        </div>
        <div class="shangou-fl"><a href="#"><img src="image/xiaomidianshi4C.PNG" alt=""></a></div>
        <div class="shangou-fl"><a href="#"><img src="image/xiaomiWIFI2.PNG" alt=""></a></div>
        <div class="shangou-fl"><a href="#"><img src="image/pen.PNG" alt=""></a></div>
        <div class="shangou-fr"><a href="#"><img src="image/xiaomiMIX2.PNG" alt=""></a></div>
    </div>
</div>
<div class="itemBox"><a href="#"><img src="image/xianshilijian.jpg" alt=""></a></div>

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
</body>
</html>